main {
  width: 600px;
  height: 300px;
  padding: 52px 29px;
  border: solid 1px #fff;
  display: flex;
  justify-content: space-around;
}

main div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  width: 200px;
  height: 200px;
}

.cengci {
  border-radius: 50%;
  box-shadow: 0 0 0 10px #f0932b, 0 0 0 10px #ffbe76 inset;

}

.change {
  outline: dashed 2px  #f6e58d;
  border-radius: 30px;
  outline-offset: -10px;
}



/* box-shadow 
 * box-shadow: h-shadow v-shadow blur spread color inset;
 *  h-shadow	必需的。水平阴影的位置。允许负值
    v-shadow	必需的。垂直阴影的位置。允许负值
    blur	可选。模糊距离
    spread	可选。阴影的大小
    color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
    inset	可选。从外层的阴影（开始时）改变阴影内侧阴影
 */


 /**
  * outline不占据空间，绘制于元素内容周围。
  * 根据规范，outline通常是矩形，但也可以是非矩形的。
 */